<template>
  <div>
    <div @click="addCount" class="btn">{{ num.count }}</div>
    <div @click="addCount2" class="btn">{{ num2 }}</div>
    <div>{{ num3 }}</div>
  </div>
</template>
<script setup>
// ref 响应式对象
import {ref} from "vue";
// 1 对像形式
const num = ref({
  count: 0
})
const addCount = () => {
  num.value.count++
  console.log(num.value.count)
}
// 2 简单类型 数字、字符、布尔
const num2 = ref(0)
const addCount2 = () => {
  num2.value++
  console.log(num2.value)
}
// 3 数组
const num3 = ref([0, 1, 2])
setInterval(function () {
  num3.value.push(num3.value.length + 1)
}, 2000)

</script>

<style scoped>
.btn {
  padding: 5px 10px;
  background: #ccc;
}
</style>
